<template>
    <div id="container"></div>
</template>

<script>
import { getApiBasicGetDishAttributeValue } from "@/api/business/manager";
import * as echarts from "echarts";
export default {
    components: {},
    name: "piechart",
    data() {
        return {
            data: [
                // { value: 1048, name: "糖类" },
                // { value: 735, name: "蛋白质" },
                // { value: 580, name: "脂肪" },
            ],
        };
    },
    props: {
        nutrition: {
            type: Array,
            default () {
                return [
                    { value: 333, name: "蛋白质" },
                    { value: 333, name: "脂肪" },
                    { value: 333, name: "糖" },
                ]
            }
        },
    },
    mounted() {},
    methods: {
        myChart(nutrition = []) {
            //1.echarts初始化。
            var myChart = echarts.init(document.querySelector("#container"));
            //2.设置图表配置项
            // 绘制图表
            var option;

            option = {
                legend: {
                    bottom: "bottom",
                },
                tooltip: {
                    trigger: "item",
                },
                series: [
                    {
                        type: "pie",
                        radius: "60%",
                        center: ['50%', '50%'],
                        data: nutrition || this.nutrition,
                        label: {
                            normal: {
                                show: true,
                                formatter: '{b}' + '\n\r' + '({d}%)'
                            }
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)",
                            },
                        },
                        itemStyle: {
                            normal: {
                            color: function (colors) {
                                var colorList = [
                                        '#1E6FFF',
                                        '#FFCD00',
                                        '#FA5A35'
                                    ];
                                    return colorList[colors.dataIndex];
                                }
                            },
                        }
                    },
                ],
            };
            option && myChart.setOption(option);
            window.onresize = function () {
                myChart.resize();
            };
        },
    },
};
</script>
<style scoped lang="less">
#container {
    width: 305px;
    height: 257px;
}
</style>
